<template>
  <div class="nav-controller">
    <div class="toggle" @click="toggle"><i class="el-icon-s-fold"></i></div>
    <nav-breadcrumb></nav-breadcrumb>
    <nav-avatar></nav-avatar>
  </div>
</template>

<script>
import NavBreadcrumb from '@/components/nav/NavBreadcrumb.vue'
import NavAvatar from '@/components/nav/NavAvatar.vue'
import { defineComponent } from 'vue'
import { useStore } from 'vuex'

export default defineComponent({
  components: {NavBreadcrumb, NavAvatar},
  setup() {
    const store = useStore()

    const toggle = () => {
      store.commit('toggle')
    }
    return {
      toggle
    }
  },
})
</script>

<style lang="scss" scoped>

  .nav-controller {
    display: flex;
    align-items: center;
    height: 50px;
    border-bottom: 1px solid #f0f0f0;
    box-sizing: border-box;
    .toggle {
      width: 50px;
      height: 100%;
      line-height: 50px;
      text-align: center;
      cursor: pointer;
    }
    .toggle:hover {
      background-image: linear-gradient(to right, rgba(56, 173, 134, 0.2), #ffffff);
    }
  }

</style>